{% extends 'blog/base.html' %}
{% block content %}
    {% comment %} 循环浏览后端获取的所有帖子 {% endcomment %}
    {% for post in posts %}
        <!-- 包含其他元素的白框 -->
        <div class="box"> <!-- 元素 -->
            <!-- 
                section 可以把页面划分为多个部分 
                .hero   允许您向网页添加全宽横幅，它也可以选择覆盖页面的整个高度。 is-可以有多个颜色 
            -->
            <section class="hero is-primary"> <!-- 布局 -->
                <!-- 上面预留一些空间 -->
                <div class="hero-body">
                    <p class="title">{{post.title}}</p>
                    <p class="subtitle">{{post.created_at|date:"Y-m-d H:i"}}</p>
                </div>
            </section>

            <!-- 内容区域 -->
            <div class="content"> <!-- 元素 -->
                <p>{{ post.intro }}</p>
                <a href="{% url 'detail' post.id %}">Read more</a>
            </div>
        </div>
    {% endfor %}
{% endblock content %}